<template>
    <div>
        <h1>Voe的基本写法</h1>
    </div>
    <!-- <input type="button" class="btn btn-danger" value="修改数据" v-on:click="fn"/> -->

    <table>
      <tbody>
        <tr class="bg-primary">
          <td>ID</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>婚否</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in arrObj" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.}}</td>
          <td>
            <input type="button" value="删除" >
            <input type="button" value="修改" >

          </td>
        </tr>
      </tbody>
    </table>
    <hr/>
    <select>
      <option value="">请选择</option>
      <option value="" v-for="item in city" :key="item.id">{{ item.name }}</option>
    </select>
</template>

<script setup lang="ts">
   import { ref,reactive } from 'vue';
  let arrObj=reactive([
    {id:1,name:'张三',age:20,marry:false},
    {id:2,name:'李四',age:21,marry:false},
    {id:3,name:'王维',age:22,marry:false},
    {id:4,name:'张1',age:23,marry:false},
    {id:5,name:'宋承',age:24,marry:true},
  ])
  let city=reactive([
    {id:1,name:'江西'},
    {id:2,name:'河南'},
    {id:3,name:'河北'},
    {id:4,name:'湖南'}
  ])
</script>

<style scoped>

</style>